<template>
  <div class="chartDom" ref="chartRef"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
type EchartsOption = echarts.EChartsOption
interface Props {
  option: EchartsOption | undefined
}
const props = defineProps<Props>()
const chartRef = ref<HTMLDivElement>()
const piechart = ref<echarts.ECharts>()
onMounted(() => {
  initChart()
})
watch(
  () => props.option,
  () => {
    initChart()
  },
  { deep: true }
)
const initChart = () => {
  piechart.value && piechart.value.dispose()
  piechart.value = echarts.init(chartRef.value)
  props.option && piechart.value.setOption(props.option)
}

onBeforeUnmount(() => {
  piechart.value && piechart.value.dispose()
})
</script>
<style lang="scss" scoped>
.chartDom {
  width: 100%;
  height: 100%;
}
</style>
